<script>
import {useStore} from "vuex";
import {computed, defineComponent} from "vue";

export default defineComponent({
  name:'Header',
  setup() {
    const state = useStore()
    const nickName = computed(() => state.getters.getNickName)
    const avatar = computed(() => state.getters.getAvatar)
    return {
      nickName,
      avatar
    }
  }
})
</script>

<template>
  <div class="appHeader bg-primary text-light">
      <div class="pageTitle">
          <img src="../assets/img/logo-w.png" alt="logo" class="logo">
      </div>
      <div class="right">
          <div class="headerButton">
              <img :src="avatar" alt="image" class="imaged w32">
          </div>
      </div>
  </div>
</template>

<style scoped lang="scss">

</style>